<template>
	<view class="img-box">
		<image v-if="bgUrl" :src="bgUrl"  class="bg" mode="aspectFill" />
		<template v-else>
			<view class="left-img" >
				<image :src="item" v-for="(item,index) in leftImg" :key="index" class="item" mode="aspectFill" :style="{ transform: `translateY(${scrollLetfY}px)` }"/>
			</view>
			<view class="center-img"  ref="centerScollRef">
				<image :src="item" v-for="(item,index) in centerImg"  :key="index" class="item" mode="aspectFill" :style="{ transform: `translateY(${scrollCenterY}px)` }" />
			</view>
			<view class="right-img"  >
				<image :src="item" v-for="(item,index) in rightImg"  :key="index" class="item" mode="aspectFill" :style="{ transform: `translateY(${scrollRightY}px)` }"/>
			</view>
		</template>
	</view>
</template>

<script setup>
	import {defineProps,computed, onMounted,onUnmounted, nextTick,ref} from 'vue'
	import { inWeCaht } from '@/utils/index.js'
	
	const leftImg = ref([
		'/static/imgs/1.png','/static/imgs/2.png','/static/imgs/3.png','/static/imgs/4.png','/static/imgs/5.png','/static/imgs/6.png','/static/imgs/7.png','/static/imgs/8.png','/static/imgs/9.png','/static/imgs/10.png'
	])
	
	const centerImg = ref([
		'/static/imgs/11.png','/static/imgs/12.png','/static/imgs/13.png','/static/imgs/14.png','/static/imgs/15.png','/static/imgs/16.png','/static/imgs/17.png','/static/imgs/18.png','/static/imgs/19.png','/static/imgs/20.png'
	])
	
	const rightImg = ref([
		'/static/imgs/21.png','/static/imgs/22.png','/static/imgs/23.png','/static/imgs/24.png','/static/imgs/25.png','/static/imgs/26.png','/static/imgs/27.png','/static/imgs/2.png','/static/imgs/29.png','/static/imgs/1.png'
	])
	
	const centerScollRef = ref(null)
	
	// 定义滚动位置和项目高度的响应式数据
	const scrollLetfY = ref(0);
	const scrollCenterY = ref(0);
	const scrollRightY = ref(0);
	const itemHeight = 240; // 每个项目的高度
	
	// 创建一个包含原始图像及其副本的新数组
	const leftImages = computed(() => {
	  return [...leftImg.value]; // 重复三次以确保循环效果
	});
	
	const centerImages = computed(() => {
	  return [...centerImg.value]; // 重复三次以确保循环效果
	});
	
	const rightImages = computed(() => {
	  return [...rightImg.value]; // 重复三次以确保循环效果
	});
	
	
	
	// 方法：开始自动滚动
	const startAutoScroll = () => {
	  const intervalId = setInterval(() => {
	    scrollLetfY.value -= 1; // 每次减少1px模拟向上滚动
		scrollRightY.value -= 0.9;
		
		scrollCenterY.value -= 0.8;
		
	    // 确保滚动范围在合理范围内，并实现循环滚动
	    if (scrollLetfY.value < -leftImages.value.length || 0 * itemHeight ) {
	      scrollLetfY.value = 0;
	    }
		
		if (scrollRightY.value < -rightImages.value.length || 0 * itemHeight ) {
		  scrollRightY.value = 0;
		}
		
		// 中间
		if (scrollCenterY.value < -centerImages.value.length || 0 * itemHeight ) {
		  scrollCenterY.value = 0;
		  // centerScollRef.value.scrollTop = scrollCenterY.value
		}
		
	  }, 30); // 调整这个值可以改变滚动速度
	
	  // 返回intervalId以便可以在组件卸载时清除定时器
	  return intervalId;
	};
	
	onMounted(()=>{
	  // 组件挂载后启动自动滚动
	  const scrollInterval = startAutoScroll();
	
	  // 将定时器ID存储起来，以便稍后清理
	  onUnmounted(() => clearInterval(scrollInterval));
	})
	
	const prop = defineProps({
		bgUrl:{
			type:String,
			default:""
		}
	})
	
</script>

<style lang="scss" scoped>
	.img-box{
		height: 100vh;
		width: 100%;
		display: flex;
		justify-content: space-around;
		position: relative;
		.bg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}
	}
	.img-box::before{
		content: ""; /* 必须有content属性 */
		  position: absolute; /* 绝对定位 */
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background: linear-gradient(to bottom,rgba(#982b8d, 0.5), rgba(#290141, 1)); /* 渐变背景 */
		  z-index: 1; /* 设置层叠顺序 */
	}
	
	.left-img,.center-img,.right-img{
		width: 31%;
		transition: transform 0.3s ease-in-out;
		overflow-y: hidden;
		.item{
			width: 100%;
			height: 240px;
		}
	}

</style>